<template>
    <div class="discount-wrapper">
      <div class="discount-head">
        <div class="title">
          <span>全部优惠</span>
        </div>
        <div class="show-more" @click="toShowDiscount">
          <span>查看附近优惠 ></span>
        </div>
      </div>
      <!--click 事件都添加了 stop 修饰器来阻止冒泡，这样，点击到它们的时候就不会冒泡到 document 上面了-->
      <div class="select-wrapper">
        <div class="screen">
          <div class="menu1" @click.stop="toShowContent1">
            分类<i class="icon-ali-subscript"></i>
          </div>
          <div class="menu2" @click.stop="toShowContent2">
            筛选<i class="icon-ali-subscript"></i>
          </div>
        </div>
        <div class="select-content1" v-show="showContent1">
          <div class="select-option-first" @click="choose('aa')" v-click-out="test">全部</div>
          <div v-for="option in selectValue" :key="option.id" class="select-option" @click="choose(option.id)">{{option.name}}</div>
        </div>
        <div class="select-content2" v-show="showContent2">
          <div class="select-option-tow">
            <div class="option-title">渠道类型</div>
            <div class="option-content">
              <input type="checkbox" id="1" value="仙道" v-model="checkedNames">
              <label for="1">仙道</label>
              <input type="checkbox" id="2" value="魔道" v-model="checkedNames">
              <label for="2">魔道</label>
              <span>{{checkedNames}}</span>
            </div>
            <div class="button-wrapper">
              <div class="button" @click="cancel">重置</div>
            </div>
          </div>
        </div>
      </div>

      <div class="discount-list-wrapper">
        <div v-for="activity in discountList" :key="activity.shopName" class="discount-list">
          <div class="shop-wrapper" @click="showDetail">
            <div class="shop-img-wrapper">
              <img class="shop-img" :src="activity.shopImg">
            </div>
            <div class="shop-info">
              <div class="name">{{activity.shopName}}</div>
              <div class="distance">{{activity.distance}}</div>
            </div>
            <div class="link-icon"><span> ></span></div>
          </div>
          <div class="discount-activity-wrapper">
            <div v-for="discount in activity.discounts" :key="discount.discountName" class="discount-activity" @click="showDetail">
              <div class="organ-img">
                <img :src="discount.organIcon">
              </div>
              <div class="organ-info">
                <div class="discount-name">{{discount.discountName}}</div>
                <div class="describe">
                  <div class="organ-name">{{discount.organ}}</div>
                  <div class="quota">
                    <span v-if="discount.quota">剩余名额：</span>{{discount.quota}}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
</template>

<script type="text/ecmascript-6">
  export default {
    name: 'homeDiscount',
    components: {},
    data () {
      return {
        discountList: '',
        showContent1: false,
        showContent2: false,
        selected: '',
        checkedNames: [],
        selectValue: []
      }
    },
    mounted () {
      // let that = this
      /** 为整个document添加点击事件当点击下拉框以外的地方时下拉消失 **/
      /** document.addEventListener('click', function () {
        that.showContent1 = false
        that.showContent2 = false
      }) **/

      this.init()
    },
    methods: {
      init () {
        this.$api.get('static/data.json', null, response => {
          this.discountList = response.data.discountIfo
        })
        this.$api.get('static/data.json', null, response => {
          this.selectValue = response.data.selectorKey
        })
      },
      showDetail () {
        this.$router.push({name: 'detail'})
      },
      toShowDiscount () {
        this.$router.push({name: 'discount'})
      },
      choose (value) {
        this.showContent1 = false
        if (value !== this.selected) {
          this.selected = value
          console.log(this.selected)
        }
      },
      toShowContent1 () {
        this.showContent1 = !this.showContent1
        this.showContent2 = false
      },
      toShowContent2 () {
        this.showContent2 = !this.showContent2
        this.showContent1 = false
      },
      test: function (event) {
        this.showContent1 = false
      },
      cancel (value) {
        this.checkedNames = []
      }
    },
    directives: {
      clickOut: {
        bind: function (el, binding) {
          function handler (e) {
            if (el.contains(e.target)) return false
            if (binding.expression) {
              binding.value()
            }
          }
          el.handler = handler
          document.addEventListener('click', el.handler)
        }
      }
    }
  }
</script>

<style lang="stylus" type="text/stylus" scoped>
@import "home-discount.styl"
</style>
